<template>
  <div class="input-group">
    <div class="wrap">
      <el-input-number
        v-model="HH"
        type="number"
        class="hasUnit"
        :min="0"
        :controls="false"
        @change="changeTime"
        @focus="HHfocus"
      />
      <span class="unit">小时</span>
    </div>

    <div class="wrap">
      <el-input-number
        v-model="MM"
        type="number"
        class="hasUnit"
        :min="0"
        :max="59"
        :controls="false"
        @change="changeTime"
        @focus="MMfocus"
      />
      <span class="unit" :class="size">分钟</span>
    </div>
    <!-- <div class="close">
      <i v-if="value !== null" class="el-icon-circle-close close-icon" @click="clear"></i>
    </div> -->
  </div>
</template>

<script>
export default {
  components: {},
  inject: ['formSize'],
  props: {
    value: {
      default: ''
    },
    conf: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      HH: 0,
      MM: 0
    }
  },
  computed: {
    size() {
      return this.formSize?.() ?? 'small'
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val === null) {
          this.HH = undefined
          this.MM = undefined
        } else {
          this.HH = parseInt(val / 60)
          this.MM = val % 60
        }
      },
      immediate: true
    }
  },
  methods: {
    HHfocus() {
      if (this.HH === 0) {
        this.HH = undefined
      }
    },
    MMfocus() {
      if (this.MM === 0) {
        this.MM = undefined
      }
    },
    changeTime() {
      let hh = 0
      let mm = 0
      isNaN(this.HH) || (hh = this.HH * 60)
      isNaN(this.MM) || (mm = this.MM)
      let val = hh + mm

      if (this.HH === undefined && this.MM === undefined) {
        val = null
      }
      this.$emit('input', val)
    },
    clear() {
      this.$nextTick(() => {
        this.$emit('input', null)
      })
    }
  }
}
</script>
<style lang="scss">
.input-group {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .wrap {
    flex: 1;
    min-width: 78px;
    display: flex;
    align-items: center;
    &:first-child {
      margin-right: 4px;
    }
    .el-input-number.hasUnit {
      flex: 1;
      width: 0;
      .el-input__inner {
        border-radius: 4px 0 0 4px !important;
      }
      &.el-input-number--small {
        + .unit {
          height: 32px;
          line-height: 30px;
        }
      }
      &.el-input-number--mini {
        + .unit {
          height: 28px;
          line-height: 26px;
          font-size: 10px;
        }
      }
      + .unit {
        flex-shrink: 0;
        padding: 0 5px;
        background-color: rgb(245, 247, 250);
        border: 1px solid #dcdfe6;
        border-left: none;
        height: 36px;
        line-height: 34px;
        border-radius: 0 4px 4px 0;
        color: #909399;
      }
    }
  }
  &:hover {
    .close {
      .close-icon {
        display: inline;
      }
    }
  }
  .close {
    font-size: 16px;
    width: 20px;
    color: #c0c4cc;
    display: flex;
    align-items: center;
    .close-icon {
      padding: 5px;
      cursor: pointer;
      display: none;
    }
  }
}
</style>
